<template>
    <div class="detail">
        <div v-if="commentslist.length != 0">
            <div class="header_box">
                <i class="back" @click="$router.back()"></i>
                <i class="forward"></i>
            </div>

            <div class="book_box">
                <div class="book_detail">
                    <div class="book_left">
                        <div class="img-box">
                            <img :src="image" alt="" />
                        </div>
                    </div>
                    <div class="book_right">
                        <div class="book_name">{{ title }}</div>
                        <div class="book_writer">{{ name }}</div>
                        <div class="book_type"></div>
                        <div class="book_hot">
                            <span class="book_num">{{ words | num }}万字</span>
                            <span class="book_click">{{ scount }}点击</span>
                        </div>
                        <div class="book_price">{{ price }}阅点/千字</div>
                    </div>
                </div>

                <div class="book_profile">
                    <p>{{ summary }}</p>
                </div>

                <div class="book_directory">
                    <p class="look">查看目录</p>

                    <div class="total_box" @click="goInfo">
                        <p>
                            共<span>{{ infolist.length }}</span
                            >章
                        </p>
                        <i></i>
                    </div>
                </div>
            </div>

            <div class="xian"></div>

            <div class="footer_box">
                <div class="left">
                    <a>
                        <p>加入书架</p>
                    </a>
                </div>
                <div class="right">
                    <a>
                        <p>开始阅读</p>
                    </a>
                </div>
            </div>

            <div class="comments_box">
                <div class="header-comments">
                    <div class="left">评论</div>
                    <div class="right">写评论</div>
                </div>
                <div class="comments-con" v-for="(item, index) in commentslist" :key="index">
                    <div class="avatar">
                        <img :src="item.avatar" alt="" />
                    </div>
                    <div class="information">
                        <div class="name">
                            <p>{{ item.nickName }}</p>
                            <span>Lv{{ item.userLevel }}</span>
                            <div class="like">
                                <span>{{ item.likes }}</span>
                                <i></i>
                            </div>
                        </div>
                        <div class="time">{{ item.time | time }}</div>
                        <div class="comments">{{ item.comment }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="loading" v-else>数据加载中...</div>
    </div>
</template>

<script>
import { bookGetsub, bookInfo, comments } from "@/api/found";
export default {
    // props: ["item"],
    data() {
        return {
            title: "",
            name: "",
            summary: "",
            id: "",
            image: "",
            scount: "",
            words: 0,
            price: 0,
            infolist: [],
            commentslist: [],
        };
    },
    filters: {
        num: function (value) {
            return (value / 10000).toFixed(1);
        },
        time(value) {
            let sj = new Date();
            sj.setTime(value);
            return sj.toLocaleString();
        },
    },
    methods: {
        getComments() {
            let data = {
                bookId: this.$route.query.id,
            };
            comments({ data }).then((res) => {
                this.commentslist = res.all.list;
            });
        },
        async getDeteil(id, title) {
            // console.log(id, title);
            let data = {
                id,
                title,
            };
            await bookGetsub({ data }).then((res) => {
                // console.log(res.feed);
                // console.log(res.feed.entry.title);
                this.title = res.feed.entry.title;
                // console.log(res.feed.entry.summary);
                this.summary = res.feed.entry.summary;
                // console.log(res.feed.entry.id);
                this.name = res.feed.entry.author.name;
                this.id = res.feed.entry.id;
                // console.log(res.feed.entry.link[1].href);
                this.image = res.feed.entry.link[1].href;
                // console.log(res.feed.entry["pris:subscribe"].clicksCount);
                this.scount = res.feed.entry["pris:subscribe"].clicksCount;
                // console.log(res.feed.entry["pris:book"].words);
                this.words = res.feed.entry["pris:book"].words;
                this.price = res.feed.entry["pris:book"].wprice;
            });
        },

        getInfo() {
            let data = {
                source_uuid: this.$route.query.id,
            };
            bookInfo({ data }).then((res) => {
                // console.log(res);
                let result = res.data.catalog;
                this.infolist = result;
            });
        },
        goInfo() {
            this.$router.push({
                path: "/detaillist",
                query: {
                    source_uuid: this.id,
                },
            });
        },
    },
    created() {
        let ids = this.$route.query.id;
        let titles = this.$route.query.title;
        this.getDeteil(ids, titles);
        this.getInfo();
        this.getComments();
    },
};
</script>

<style lang="scss" scoped>
.detail {
    position: relative;
    width: 100%;
    // padding: 0 15px;
    .comments_box {
        padding: 10px 15px 60px;

        .header-comments {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left {
                border-left: 2px solid #313131;
                padding-left: 5px;
                font-size: 16px;
                color: #313131;
            }
            .right {
                font-size: 14px;
                color: #999;
                padding: 2px;
                border: 1px solid #999;
            }
        }

        .comments-con {
            margin-top: 20px;
            display: flex;

            .avatar {
                width: 40px;
                height: 40px;
                img {
                    border-radius: 50%;
                    width: 100%;
                    height: 100%;
                }
            }
            .information {
                margin-left: 10px;
                flex: 1;
                .name {
                    // border: 1px solid #000;
                    display: flex;
                    align-items: center;
                    padding: 5px 0;
                    p {
                        font-size: 16px;
                        color: #6faad6;
                    }
                    span {
                        // flex: 1;
                        margin-left: 5px;
                        display: inline-block;
                        height: 15px;
                        font-size: 12px;
                        color: #999;
                        border: 1px solid #999;
                    }
                    .like {
                        flex: 1;
                        // text-align: right;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;

                        span {
                            border: 0;
                        }

                        i {
                            display: block;
                            width: 15px;
                            height: 15px;
                            background-image: url(@/assets/likes.png);
                            background-repeat: no-repeat;
                            background-size: 100%;
                        }
                    }
                }

                .time {
                    font-size: 12px;
                    color: #999;
                    padding-bottom: 5px;
                }

                .comments {
                    font-size: 14px;
                    line-height: 20px;
                }
            }
        }
    }
    .header_box {
        width: 100%;
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .back,
        .forward {
            display: block;
            width: 20px;
            height: 20px;
            // background: #000;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .back {
            background-image: url(@/assets/back.png);
        }
        .forward {
            background-image: url(@/assets/zf.png);
        }
    }
    .book_box {
        width: 100%;
        padding: 15px;
    }
    .book_detail {
        display: flex;
    }
    .book_left {
        width: 30%;
        .img-box {
            width: 100%;
            height: 137px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .book_right {
        flex: 1;
        margin-left: 10px;
        // border: 1px solid #000;

        .book_name {
            font-size: 16px;
            color: #000;
            // font-weight: bold;
        }
        .book_writer {
            font-size: 12px;
            color: skyblue;
            padding: 5px 0;
        }
        .book_type {
            font-size: 12px;
            color: #999;
            padding-bottom: 5px;
        }
        .book_hot {
            font-size: 12px;
            color: #999;
        }
        .book_num {
            margin-right: 10px;
        }
        .book_price {
            padding-top: 10px;
            font-size: 12px;
            color: #999;
        }
    }

    .book_profile {
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
        p {
            font-size: 13px;
            height: 62px;
            line-height: 20px;
            color: #656556;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }
    .book_directory {
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        .look {
            font-size: 16px;
            color: #000;
            font-weight: bold;
        }

        .total_box {
            font-size: 14px;
            color: #999;
            // font-weight: bold;
            display: flex;
            align-items: center;
        }

        i {
            margin-left: 5px;
            display: inline-block;
            width: 5px;
            height: 5px;
            border: 2px solid #999;
            transform: rotate(45deg);
            border-left-color: transparent;
            border-bottom-color: transparent;
        }
    }

    .xian {
        width: 100%;
        height: 5px;
        background: #f0f0f0;
    }

    .footer_box {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        border-top: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        background: #fff;

        .left,
        .right {
            flex: 1;
            font-size: 16px;
            color: #313131;
            text-align: center;
            padding: 15px 0;
        }
        .right {
            border-left: 1px solid #f0f0f0;
            a {
                color: #e0c9a0;
            }
        }
    }

    .loading {
        width: 100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        height: 400px;
    }
}
</style>
